<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr >
      <td>照片</td>
      <td><img :src="person.imgUrl" width="120px"></td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td>{{person.age}}</td>
    </tr>
    <tr >
      <td>好友</td>
      <td >
        <ul>
          <li  v-for="name in person.friends">{{name}}</li>
        </ul>
      </td>
    </tr>

  </table>
  <el-icon size="50px" color="#0aa1ed" @click="loadDate"><Plus/></el-icon>
</template>

<script setup>
//1.定义对象，用作表格数据绑定
import {ref} from "vue";

const person = ref({name:'',age:'',imgUrl:'',friends:[]})
//2.定一个用来加载数据的方法
const loadDate=()=>{
  person.value={
    name: '范传奇',
    age:18,
    imgUrl:'fcq.jpg',
    friends: ['李四','王五','赵六']
  }
};
</script>


<style scoped>

</style>